<template>
  <div class="app-container">
    <div class="husbandry-info">
      <el-form
        ref="form"
        :inline="true"
        label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="地块编码" prop="landCode">
              <el-input v-model="produceInfo.landCode" placeholder="请输入地块编码"/>
            </el-form-item>
          </el-col>
          <el-col :span="6" disabled>
            <el-form-item label="作物种类" prop="cropSpecie">
              <el-select v-model="produceInfo.cropSpecie" placeholder="请选择作物种类">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCE_INFO_CROP_SPECIE)"
                           :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="addHusbandry">添加计划</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="scheduled-info">
      <div class="header">已计划农事</div>
      <el-table border :data="husbandryList">
        <el-table-column label="农事活动" align="center" prop="husbandryEvents">
          <template v-slot="scope">
            <dict-tag :type="DICT_TYPE.PRODUCE_HUSBANDRY_EVENTS" :value="scope.row.husbandryEvents"/>
          </template>
        </el-table-column>
        <el-table-column label="计划日期" align="center" prop="planTime" width="180">
          <template v-slot="scope">
            <span>{{ parseTime(scope.row.planTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="执行状态" align="center" prop="executeStatus">
          <template v-slot="scope">
            <dict-tag :type="DICT_TYPE.PRODUCE_HUSBANDRY_EXECUTE_STATUS" :value="scope.row.executeStatus"/>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button size="mini" type="text" icon="el-icon-edit"
                       @click="handleHusbandry(scope.row)"
                       v-hasPermi="['produce:husbandry:update']">执行
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="execute-info" v-if="executeFlag">
      <div class="header">{{ title }}</div>
      <el-form ref="form" :model="form" label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="农事活动" prop="husbandryEvents">
              <el-select v-model="form.husbandryEvents" placeholder="农事活动">
                <el-option v-for="dict in this.getDictDatas(DICT_TYPE.PRODUCE_HUSBANDRY_EVENTS)"
                           :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="open">
            <el-form-item label="员工" prop="memberId">
              <el-cascader :options="memberOptions" v-model="memberId"
                           :props="{ expandTrigger: 'hover' }" placeholder="请选择员工" style="width: 250px">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="open">
            <el-form-item label="计划日期" prop="planTime">
              <el-date-picker clearable v-model="form.planTime" type="date" value-format="timestamp"
                              placeholder="选择计划日期"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="!open">
            <el-form-item label="执行时间" prop="executeTime">
              <el-date-picker clearable v-model="form.executeTime" type="date" value-format="timestamp"
                              placeholder="执行时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="!open">
            <el-form-item label="耗时(时)" prop="take">
              <el-input v-model="form.take" placeholder="耗时"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="!open">
          <el-table :data="inputData" border>
            <el-table-column prop="inputName" label="投入品名称" align="center">
              <template v-slot="scope">
                <el-input v-model="scope.row.inputName" placeholder="请输入投入品名称"/>
              </template>
            </el-table-column>
            <el-table-column prop="inputCount" label="投入品数量" align="center">
              <template v-slot="scope">
                <el-input-number v-model="scope.row.inputCount"  label="投入品数量"/>
              </template>
            </el-table-column>
            <el-table-column prop="inputType" label="投入品类别" align="center">
              <template v-slot="scope">
                <el-select v-model="scope.row.inputType" placeholder="请选择投入品类别">
                  <el-option v-for="dict in getDictDatas(
                      DICT_TYPE.AGRO_INPUT_TYPE
                    )" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"/>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="inputDescribe" label="投入品描述" align="center">
              <template v-slot="scope">
                <el-input v-model="scope.row.inputDescribe" placeholder="请输入投入品描述"/>
              </template>
            </el-table-column>
            <el-table-column prop="inputPrice" label="投入品价格" align="center">
              <template v-slot="scope">
                <el-input v-model="scope.row.inputPrice" placeholder="请输入投入品价格"/>
              </template>
            </el-table-column>
            <el-table-column prop="inputTime" label="投入时间" align="center">
              <template v-slot="scope">
                <el-date-picker v-model="scope.row.inputTime" value-format="timestamp" type="date"/>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
              <template v-slot="scope">
                <el-button size="mini" type="text" icon="el-icon-plus" @click="addInput(scope.row)"></el-button>
                <el-button size="mini" type="text" icon="el-icon-minus"
                           @click="reduceInput(scope.$index, scope.row)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row class="pic" v-if="!open">
          <el-col :span="24">
            <el-form-item label="农事图片">
              <imageUpload v-model="form.husbandryImg" style="margin-top: 10px"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="border: none;text-align: center">
          <el-col :span="24">
            <el-form-item v-if="executeFlag">
              <el-button type="primary" @click="submitForm">确定</el-button>
              <el-button type="danger" @click="executeFlag=false">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>


import ImageUpload from "@/components/ImageUpload";
import {listAllMember} from "@/api/member/memberUser";
import {createHusbandry, getHusbandryListByInfoId, updateHusbandry} from "@/api/produce/husbandry";
import {getInfo} from "@/api/produce/info";

export default {
  components: {
    ImageUpload,
  },
  data() {
    return {
      type: "edit",
      form: {
        executeStatus: null
      },
      inputData: [{}],
      executeFlag: false,
      produceInfo: {
        landCode: null
      },
      memberId: null,
      memberOptions: null,
      husbandryList: [],
      open: false,
      title: "",
      landName: "",
    }
  },
  async mounted() {
    this.type = this.$route.query.type;
    const id = this.$route.query.id
    await getInfo(id).then((resp) => {
      this.produceInfo = resp.data;
    })
    await listAllMember().then((resp) => {
      this.memberOptions = resp.data.map(user => {
        return {value: '' + user.id, label: user.nickname}
      })
    })
    await getHusbandryListByInfoId(this.produceInfo.id).then((resp) => {
      this.husbandryList = resp.data;
    })
    // await getManagementByLandCode(this.produceInfo.landCode).then((resp) => {
    //   this.landName = resp.data.landName;
    // })
  },
  methods: {
    /** 添加投入品 */
    addInput() {
      this.inputData.push({});
    },
    addHusbandry() {
      this.title = "添加农事计划";
      this.open = true;
      this.executeFlag = true;
    },
    /** 移除投入品 */
    reduceInput() {
      if (this.inputData.length > 1) {
        this.inputData.pop();
      }
    },
    handleHusbandry(row) {
      this.form.id = row.id;
      this.form.husbandryEvents = row.husbandryEvents;
      if (row.executeStatus === 1) {
        this.executeFlag = true;
      } else {
        this.$modal.msgWarning("农事已执行!");
      }

    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        if (this.memberId != null) {
          this.form.memberId = this.memberId[this.memberId.length - 1];
        }
        //修改的提交
        if (this.form.id != null) {
          this.form.executeStatus = 0;
          this.form.inputUpdateReqVOS = this.inputData;
          updateHusbandry(this.form).then(response => {
            this.$modal.msgSuccess("执行农事成功");
            this.$tab.closeOpenPage({path: "/produce/info/index"});
          });
          return;
        }
        // 添加的提交
        this.form.infoId = this.produceInfo.id;
        this.form.executeStatus = 1;
        this.form.inputCreateReqVOS = this.inputData;
        createHusbandry(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.$tab.closeOpenPage({path: "/produce/info/index"});
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.header {
  display: inline-block;
  padding: 10px;
  border-bottom: 2px solid #409eff;
  margin-bottom: 20px;
}

.app-container {
  background-color: #f0f2f5;

  .husbandry-info {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;

    .el-form {
    }
  }

  .has-unit input {
    border-bottom: 1px solid #ccc !important;
    height: 40px !important;
    margin-top: 5px;
  }

  .el-input-group__append {
    border: none;
    background-color: #fff;
  }

  .el-input-group__prepend {
    border: none;
    background-color: #fff;
  }

  .bg-white .el-form-item__content {
    background-color: #fff !important;
  }

  .farmer-family {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
  }

  .scheduled-info, .execute-info {
    background-color: #fff;
    padding: 20px;
    height: auto;

    .el-form {
      border-bottom: 1px solid #DCDFE6;
      border-left: 1px solid #DCDFE6;

      .el-row {
        border-top: 1px solid #DCDFE6;

        .el-col {
          border-right: 1px solid #DCDFE6;

          .el-form-item {
            margin: 0;
            height: 50px;
            padding: 6px;

            .el-form-item__content {
              padding-left: 20px;
            }
          }
        }
      }

      .el-form-item__label {
        height: 120px;
        line-height: 120px;
      }

      .pic {
        height: 180px;

        .el-form-item__label {
          height: 180px;
          line-height: 180px;
        }
      }

      .el-input input {
        height: 50px;
      }

      .el-form-item__label {
        text-align: center;
        height: 50px;
        line-height: 50px;
        background-color: #fafafa;
      }
    }
  }
}
</style>
